<template>
  <div>
    <el-cascader :props="props" :value="value" :options="options" @change="handleChange" style="width:100%"></el-cascader>
  </div>
</template>
<script>
import { getDepartmentRequest } from '@/api/department'
//转平铺的树形结构
import { transListToTreeData } from '@/utils'
export default {
  name: 'SelectTree',
  props: {
    value: {
      type: Number
    }
  },
  data () {
    return {
      options: [],
      props: {
        label: 'name', // 要展示的字段
        value: 'id' // 要存储的字段 
      },
    }
  },
  created () {
    //获取树状列表
    this.getDepartment()
  },
  computed: {
  },
  methods: {
    //获取树状列表
    async getDepartment () {
      const res = await getDepartmentRequest()


      //下面这句话,是将treeList数据更新,是异步操作
      this.options = transListToTreeData(res.data, 0)
      console.log(this.options[0])
    },
    handleChange (Params) {
      if (Params && Array.isArray(Params) && Params.length > 0) {
        this.$emit('input', Params[Params.length - 1])
      } else {
        this.$emit('input', null)
      }
    },
  }
}
</script>
<style lang='less'  scoped>
</style>
